import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { GB } from '../../../environments/environment';
import { TranslateService } from '@ngx-translate/core';
import { I18nService } from '../../core/i18n/i18n.service';
import { ToptipsService } from 'ngx-weui';
import { NgForm, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { ApiService } from 'src/app/core/api';
import { Router } from '@angular/router';
import { StorageService } from 'src/app/core/sotrage/storage.service';

@Component({
	selector: 'app-index',
	templateUrl: './index.component.html',
	styleUrls: ['./index.component.less'],
})
export class LoginComponent implements OnInit {
	@ViewChild('languagebox', { static: true }) languagebox: ElementRef;
	pwError = false;
	langShow = false;
	dialogShow = false;
	jhNum;
	gb = GB;
	e: number; //換圖隨機數
	lang: any = {};
	res: any = {
		id: '',
		vcode: '',
		password: '',
		worldpost: '1',
	};
	imageVerifyCodeId: any;
	registerEmailForm: FormGroup;
	registerMobileForm: FormGroup;
	selData = [{ id: '86', name: '+86' }, { id: '81', name: '+81' }];
	user: any = {
		loginId:'登录/注册',
		availableBalance:'0'
	};
	isLogin = true;

	constructor(
		private i: I18nService,
		private api: ApiService,
		private router: Router,
		private sto: StorageService,
		private srv: ToptipsService,
		private fb: FormBuilder,
		private translate: TranslateService
	) {
		this.lang = { lang: localStorage.getItem('lang') || 'zh' };
		this.translate.onLangChange.subscribe(params => {
			this.lang = params;
		});
	}

	ngOnInit() {
		this.configForm();
		this.getDel();
	}
	changeLang(e) {
		this.i.changeLang(e);
		this.languagebox.nativeElement.blur();
	}
	onHide() {
		this.langShow = false;
	}
	onShow() {
		this.langShow = true;
	}
	chickOut() {
		this.api.post('退出登录', {})
		.then(res => {
			this.dialogShow = false;
			this.sto.remove('user');
			this.sto.remove('token');
			this.sto.remove('gameToken');
			this.isLogin = true;
			this.user = {
				loginId:'登录/注册',
				availableBalance:'0'
			};;
		});
	}
	cancel() {
		this.dialogShow = false;
	}
	configForm() {
		this.registerEmailForm = this.fb.group(
			{
				email: [null, [Validators.required, Validators.pattern("^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z-]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]|net|NET|asia|ASIA|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT|cn|CN|cc|CC)$")]],
				password: [null, [Validators.required]],
			}
		);

		this.registerEmailForm.setErrors({
			email: false
		});

		this.registerMobileForm = this.fb.group(
			{
				mobile: [null, [Validators.required]],
				phoneId: ["86", []],
				password: [null, [Validators.required]],
			}
		);

		this.registerMobileForm.setErrors({
			email: false
		});
		// }
	}
	onSave(f: NgForm) {
		let data = {};
		data['loginId'] = f.value['email'];
		data['loginPw'] = f.value['password'];
		let formData = '?loginId=' + data['username'] + '&loginPw = ' + data['loginPw'];
		this.api
			.post('登录', data)
			.then(res => {
				this.sto.set('token', res['data']['token']);
				this.getDel();
			})
			.catch(res => {
				this.srv.warn(res['message']);
			});
	}
	showlogin(){
		this.isLogin = true;
	}
	showout(){
		this.dialogShow= true;
	}
	getDel() {
		this.api
			.post('用户详情', {})
			.then(res => {
				this.sto.set('user', res['data']['agencyDetail']);
				this.user = res['data']['agencyDetail'];
				this.isLogin = false;
			})
			.catch(res => {
				this.srv.warn(res['message']);
			});
	}
	menuClick(type) {
		let map = {
			'账户信息': '/base',
			'推广配置': '2',
			'站点配置': '/websiteRedeploy',
			'消费明细': '/consumptionList',
			'我的结算': '/myConsumptionList',
			'我的消息': '6'
		}
		if (!this.sto.get('user')) {
			this.isLogin = true;
		} else {
			this.router.navigate([map[type]]);
		}
	}
	toSite(){
		if (!this.sto.get('user')) {
			this.isLogin = true;
		} else {
			this.api.post('站点配置详情',{}).then((res:any)=>{
				if(res.status === '0'){
					this.router.navigateByUrl('/websiteRedeploy');
				}
			});
		}
	}
}
